<template>
  <template v-if="componentsData?.name">
    <view
      class="body"
      :style="{
        backgroundImage: `url(${componentsData.bgUrl})`,
        height: px2rpx2px(componentsData.bgImgHeight),
        backgroundColor: `${componentsData.bgColor}`,
      }"
    >
      <template
        v-for="(item, index) in componentsData.componentList"
        :key="index"
      >
        <title-text
          class="loading-data"
          v-if="item.d.name === 'TitleText'"
          v-bind="item.d"
        />
        <custom-image
          class="loading-data"
          v-if="item.d.name === 'CustomImage'"
          v-bind="item.d"
        />
      </template>
    </view>
  </template>

  <template v-else>
    <view
      class="body"
      :style="{
        backgroundImage: `url(${componentsData.bgUrl})`,
        height: px2rpx2px(componentsData.bgImgHeight),
        backgroundColor: `${componentsData.bgColor}`,
      }"
    >
      <image
        v-if="componentsData.gif && componentsData.gif.url"
        :style="{
          width: px2rpx2px(componentsData.gif.width),
          height: px2rpx2px(componentsData.gif.height),
        }"
        :src="componentsData.gif.url"
      ></image>
    </view>
  </template>
</template>

<script setup>
import { ObjectToQueryString, ossImg } from "@/utils/utils";
import { onLoad, onShow, onUnload, onHide } from "@dcloudio/uni-app";
import { ref } from "vue";

import TitleText from "../../oreo-custom-components/TitleText";
import CustomImage from "../../oreo-custom-components/CustomImage";
import { px2rpx2px } from "../../oreo-custom-components/utils/index";
import { getDecorationInfo } from "@/services/home";

let enterTime = "";
let outTime = "";
let stayTime = "";

const iconLeft = ref(0);
const componentsData = ref({});

onShow(async () => {
  // 用户进入时间
  enterTime = new Date();
  getApp().accessLogAdd();
  setTimeout(() => {
    iconLeft.value = 207.5;
  }, 1000);
  getLoadingInfo();

  switch (true) {
    case uni.getLaunchOptionsSync().path ===
      "campaign/pages/mid-autumn/index" ||
      uni.getLaunchOptionsSync().path === "pages/custom-page/index" ||
      uni.getLaunchOptionsSync().path === "campaign/pages/panda/index":
      setTimeout(() => {
        const url2 = "/" + uni.getLaunchOptionsSync().path + `?${ObjectToQueryString(uni.getLaunchOptionsSync().query)}`
        console.log('loadingloading2',url2)
        uni.redirectTo({
          url: url2,
        });
      }, 1500);
      break;

    case uni.getLaunchOptionsSync().path === "pages/goods/goods":
      setTimeout(() => {
        uni.redirectTo({
          url:
            "/" +
            uni.getLaunchOptionsSync().path +
            "?id=" +
            uni.getLaunchOptionsSync().query.id,
        });
      }, 1500);
      break;

    case uni.getLaunchOptionsSync().path === "personalPages/coupon/coupon":
      const queryParams = ObjectToQueryString({
        "isMDL": uni.getLaunchOptionsSync().query.isMDL,
        "isStride": uni.getLaunchOptionsSync().query.isStride,
        "isQ4QRCode": uni.getLaunchOptionsSync().query.isQ4QRCode,
        "ismaltese": uni.getLaunchOptionsSync().query.ismaltese,
        "isQQShow": uni.getLaunchOptionsSync().query.isQQShow,
      })
      setTimeout(() => {
        uni.redirectTo({
          url:
            "/" +
            uni.getLaunchOptionsSync().path +
            "?" + queryParams,
        });
      }, 1500);
      break;
    case [
      "pages/home/home",
      "pages/mall/mall",
      "pages/cart/cart",
      "pages/personal/personal",
      "pages/formula/formula",
    ].includes(uni.getLaunchOptionsSync().path):
      setTimeout(() => {
        uni.switchTab({
          url: "/" + uni.getLaunchOptionsSync().path,
        });
      }, 1500);
      break;

    case uni.getLaunchOptionsSync().path === "pages/webView/webview":
      setTimeout(() => {
        getApp()
          .getUserInfo()
          .then((user) => {
            uni.redirectTo({
              url: `/pages/webView/webview?token=${uni.getStorageSync(
                "TOKEN"
              )}&openid=${uni.getStorageSync(
                "OPENID"
              )}&unionid=${uni.getStorageSync("UNIONID")}&memberid=${
                user.memberScore.memberId
              }&webSrc=${uni.getLaunchOptionsSync().query.webSrc}&shareTitel=${
                uni.getLaunchOptionsSync().query.shareTitel
              }&shareImg=${uni.getLaunchOptionsSync().query.shareImg}`,
            });
          });
      }, 1500);
      break;
    case ['campaign/pages/2023airycake/index'].includes(uni.getLaunchOptionsSync().path):
      // 跳转参数
      const noRedirect = uni.getLaunchOptionsSync().query?.redirect === '0'
      // 活动开始状态
      const started = new Date().getTime() >= new Date('2023/12/15 00:00:00').getTime()
      const ended = new Date().getTime() > 1714492799000
      const queryParamsObj = { ...uni.getLaunchOptionsSync().query }

      let _path = (noRedirect || started) ? uni.getLaunchOptionsSync().path : 'campaign/pages/2023airycake/wait'
      if (ended) {
        _path = 'campaign/pages/2023airycake/status'
        queryParamsObj.status = 1
      }
        setTimeout(() => {
        // 默认跳转
        uni.redirectTo({
          url: "/" + _path + `?${ObjectToQueryString(queryParamsObj)}`
        });
      }, 2500);
      break;
    default:
      console.log('----------query------------')
      console.log(uni.getLaunchOptionsSync().query)
      console.log('----------------------------')
      setTimeout(() => {
        // 默认跳转
        uni.redirectTo({
          url: "/" + uni.getLaunchOptionsSync().path + `?${ObjectToQueryString(uni.getLaunchOptionsSync().query)}`
        });
      }, componentsData.value.loadingTime || 1500);
      break;
  }
});

onHide(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime?.getTime() - enterTime?.getTime()) / 1000;
  console.log("页面隐藏" + ":" + stayTime + "s");

  getApp().emdlz2(
    "track",
    "event",
    "homepage_new_loading",
    "view",
    "campaign_landpage",
    stayTime
  );
});

onUnload(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime?.getTime() - enterTime?.getTime()) / 1000;
  console.log("页面卸载" + ":" + stayTime + "s");
  getApp().emdlz2(
    "track",
    "event",
    "homepage_new_loading",
    "view",
    "campaign_landpage",
    stayTime
  );
});

const getLoadingInfo = async () => {
  // 活动处理
  const path = uni.getLaunchOptionsSync().path // 'campaign/pages/2023airycake/index'
  const activityPaths = ['campaign/pages/2023airycake/index']
  if (activityPaths.includes(path)) return componentsData.value = {
    bgImgHeight: "724px",
    bgColor: '#D3221F',
    loadingTime: 2500,
    gif: {
      width: 375,
      height: 724,
      url: `${ossImg('others/2023cakeDiy/01_loading-min.gif')}`
    },
    bgUrl: `${ossImg('others/2023cakeDiy/loading_bg.png')}`
  }
  // 正常获取配置
  const res = await getDecorationInfo({ scope: 1 });
  if (res?.code === 200) {
    const components = JSON.parse(res?.data.config) ?? [];
    componentsData.value = components;
    console.log('----------------------')
    console.log(components)
    console.log(uni.getLaunchOptionsSync().path)
    console.log('----------------------')
  }
};
</script>

<style>
page {
  background-color: #1335b4 !important;
}
</style>
<style lang="less" scoped>
.body {
  width: 100%;
  min-height: 100vh;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 375px 100%;
  .loading_bg {
    width: 100%;
    height: 812px;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 375px 100%;
    position: relative;
    image {
      width: 100%;
      height: 100%;
    }
  }

  .loading_Progress {
    position: absolute;
    width: 320px;
    height: 28px;
    top: 633px;
    left: 27.5px;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 320px 100%;
    .loading_Progress_icon {
      position: absolute;
      width: 28px;
      height: 28px;
      top: -1px;
      background-repeat: no-repeat;
      background-position: top left;
      background-size: 28px 100%;
    }
  }

  .loading_title {
    position: absolute;
    width: 88px;
    height: 20px;
    top: 666.5px;
    left: 144.5px;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 88px 100%;
  }

  .loading_Dots {
    position: absolute;
    top: 666.5px;

    left: 237.5px;
    overflow-x: hidden;
    animation: ellipsis 2s infinite;
    .dot_list {
      width: 18px;
      display: flex;
      .loading_dot {
        width: 3px;
        height: 20px;
        margin-left: 3px;
        background-repeat: no-repeat;
        background-position: top left;
        background-size: 3px 100%;
      }
    }
  }
}

@keyframes ellipsis {
  from {
    width: 6px;
  }
  to {
    width: 18px;
  }
}
</style>
